<template>
  <div class="dashboard-container">
    <div class="com-top">
      <el-card class="box-card">
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
          <el-form-item label="供电单位">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker v-model="value3" type="year" placeholder="选择年" :picker-options="pickerOptions" />
          </el-form-item>
          <el-form-item label="计划状态">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 表格 -->
    <div class="dashboard-text">
      <el-card class="box-card">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="dizhi" label="供电单位" width="180" />
          <el-table-column prop="date" label="执行时段" width="180" />
          <el-table-column prop="num1" label="负荷消减能力" />
          <el-table-column prop="num2" label="预案总数" />
          <el-table-column prop="num3" label="用户总数" />
          <el-table-column prop="status" label="计划状态" />
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="ClickDelete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      currentPage4: 4,
      time: new Date(),
      pickerOptions: {
        disabledDate(time) {
          const date = new Date()
          const year = date.getFullYear()
          const timeYear = time.getFullYear()
          return year < timeYear
        }
      },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      options1: [
        {
          value: '选项1',
          label: '广东电网有限公司'
        },
        {
          value: '选项2',
          label: '国网江苏省电力有限公司'
        }
      ],
      options2: [
        {
          value: '选项1',
          label: '已执行'
        },
        {
          value: '选项2',
          label: '未执行'
        }
      ],
      value: '',
      value1: '',
      value2: '',
      value3: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          dizhi: '广东电网有限公司',
          num1: 220,
          num2: 111580,
          num3: 8900,
          status: '已执行',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          dizhi: '国网江苏省电力有限公司',
          num1: 220,
          num2: 26000,
          num3: 680,
          status: '已执行',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          dizhi: '广东电网有限公司',
          num1: 220,
          num2: 4600,
          num3: 12460,
          status: '已执行',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          dizhi: '国网江苏省电力有限公司',
          num1: 220,
          num2: 7865,
          num3: 35160,
          status: '已执行',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    // 删除
    ClickDelete() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style lang="scss" scoped>
.app-main[data-v-078753dd] {
  background: #00706d;
}
.dashboard {
  // &-container {
  //   margin: 30px;
  // }
  // &-text {
  //   font-size: 30px;
  //   line-height: 46px;
  // }
  // #4072f8  #1a73e8
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  // .box-card {
  //   width: 480px;
  // }

  .com-top {
    margin: 20px 0;
  }
  // 表格
  .dashboard-text {
    margin-top: 20px;
  }
}
</style>
